<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <ui:composition template="/layout/masterPageNotHeaderSearch.xhtml">

        <ui:define name="ui-header">
            <title>#{utilsController.getLanguages("DangKy")}</title>
        </ui:define>
        <ui:define name="ui-content">
            <div class="container content">
                        <div class="row">
                            <div class="col-md-2"/>
                            <div class="col-md-7">
                                <!-- Reg-Form -->
                                <h:form class="sky-form" id="sky-form">
                                    <p:growl id="growl" showDetail="true" sticky="true" escape="false"  />  
                                    <header>#{utilsController.getLanguages("DangKy").toUpperCase()}</header>

                                    <fieldset>                  
                                        <section>
                                            <label class="input">
                                                <i class="icon-append fa fa-user"></i>
                                                <p:inputText id="txtMa" placeholder="#{utilsController.getLanguages('UserName')}" value="#{sys_NguoiDungController.item.ma}" styleClass="rounded-custom-def"></p:inputText>
                                                <p:message for="txtMa" />
                                                <b class="tooltip tooltip-bottom-right">#{utilsController.getLanguages("rs_msg_UserName")}</b>
                                            </label>
                                        </section>
                                        <section>
                                            <label class="input">
                                                <i class="icon-append fa fa-lock"></i>
                                                <label class="select">
                                                    <select name="hinhthuc"  id="cboLoai" onchange="cboLoai_Change(this);" value="#{sys_NguoiDungController.item.loai}" class="rounded-custom-def">
                                                        <option value="1">#{utilsController.getLanguages("Seller")}</option>
                                                        <option value="0" >#{utilsController.getLanguages("Dealler")}</option>
                                                    </select>
                                                    <i></i>
                                                </label>

                                                <b class="tooltip tooltip-bottom-right">#{utilsController.getLanguages("rs_HinhThuc")}</b>
                                            </label>
                                        </section>
                                        <section id="secHangSX" hidden="hidden">
                                            <c:set value="#{c_DangTinController.findAllHangXe()}" var="hangxe" scope="session"></c:set>
                                            <label class="label">#{utilsController.getLanguages("HangXe")}</label>
                                            <label class="select select-multiple">

                                                <select multiple="multiple" id="cboHangSX" style="height: 250px;">
                                                    <c:forEach items="#{hangxe}" var="item">
                                                        <option value="#{item.getID()}">#{item.getTenHang()}</option>
                                                    </c:forEach>
                                                </select>
                                            </label>

                                        </section>
                                        <section>
                                            <label class="input">
                                                <i class="icon-append fa fa-envelope"></i>
                                                <p:inputText placeholder="#{utilsController.getLanguages('Email')}" value="#{sys_NguoiDungController.item.email}" styleClass="rounded-custom-def"></p:inputText>
                                                <b class="tooltip tooltip-bottom-right">#{utilsController.getLanguages("rs_msg_Email")}</b>
                                            </label>
                                        </section>

                                        <section>
                                            <label class="input">
                                                <i class="icon-append fa fa-lock"></i>
                                                <p:password  placeholder="#{utilsController.getLanguages('MatKhau')}" value="#{sys_NguoiDungController.item.matKhau}" styleClass="rounded-custom-def"></p:password>

                                                <b class="tooltip tooltip-bottom-right">#{utilsController.getLanguages("rs_msg_MatKhau")}</b>
                                            </label>
                                        </section>

                                        <section>
                                            <label class="input">
                                                <i class="icon-append fa fa-lock"></i>
                                                <p:password  placeholder="#{utilsController.getLanguages('NhapLaiMatKhau')}" value="#{sys_NguoiDungController.nhapLaiMatKhau}" styleClass="rounded-custom-def"></p:password>

                                                <b class="tooltip tooltip-bottom-right">#{utilsController.getLanguages("rs_msg_NhapLaiMatKhau")}</b>
                                            </label>
                                        </section>
                                    </fieldset>

                                    <fieldset>
                                        <div class="row">
                                            <section class="col col-6">
                                                <label class="input">
                                                    <p:inputText  placeholder="#{utilsController.getLanguages('Ho')}" value="#{sys_NguoiDungController.item.ho}" styleClass="rounded-custom-def"></p:inputText>

                                                    <b class="tooltip tooltip-bottom-right">#{utilsController.getLanguages("rs_msg_Ho")}</b>
                                                </label>
                                            </section>
                                            <section class="col col-6">
                                                <label class="input">
                                                    <p:inputText  placeholder="#{utilsController.getLanguages('Ten')}" value="#{sys_NguoiDungController.item.ten}" styleClass="rounded-custom-def"></p:inputText>
                                                    <b class="tooltip tooltip-bottom-right">#{utilsController.getLanguages("rs_msg_Ten")}</b>
                                                </label>
                                            </section>
                                        </div>

                                        <section>
                                            <label class="select">
                                                <select name="gender"  id="cboGioiTinh" class="rounded-custom-def">
                                                    <option value="M">#{utilsController.getLanguages("Nam")}</option>
                                                    <option value="F">#{utilsController.getLanguages("Nu")}</option>
                                                    <option value="O">#{utilsController.getLanguages("Khac")}</option>
                                                </select>
                                                <i></i>
                                            </label>
                                        </section>
                                        <div class="row">
                                            <section class="col col-6">
                                                <label class="select">
                                                    <c:set value="#{sI_TinhController.findAllQuocGia()}" var="vQuocGia" scope="session"></c:set>
                                                    <select name="gender"  id="cboQuocGiaID" class="rounded-custom-def" onchange="cboQuocGiaID_Change_DangKy();">
                                                        <c:forEach items="#{vQuocGia}" var="item">
                                                            <option value="#{item.quocGiaID}" selected="#{sys_NguoiDungController.item.quocGiaID==item.quocGiaID?'selected':''}">#{item.tenQG}</option>
                                                        </c:forEach>
                                                    </select>
                                                    <i></i>
                                                </label>
                                            </section>
                                            <section class="col col-6">
                                                <label class="select">
                                                    <p:outputPanel id="pnTinh">
                                                        <c:set value="#{sI_TinhController.findAllTinh()}" var="vTinh" scope="session"></c:set>
                                                        <select name="gender"  id="cboTinhID" class="rounded-custom-def">
                                                            <c:forEach items="#{vTinh}" var="item">
                                                                <option value="#{item.tinhID}" selected="#{sys_NguoiDungController.item.tinhID==item.tinhID?'selected':''}">#{item.tenTinh}</option>
                                                            </c:forEach>
                                                        </select>
                                                        <i></i>
                                                    </p:outputPanel>


                                                </label>
                                            </section>
                                        </div>

                                        <div class="row">
                                            <section class="col col-6">
                                                <label class="input">
                                                    <p:inputText  placeholder="#{utilsController.getLanguages('DienThoai')}" value="#{sys_NguoiDungController.item.dienThoai}" styleClass="rounded-custom-def"></p:inputText>

                                                    <b class="tooltip tooltip-bottom-right">#{utilsController.getLanguages("rs_msg_DienThoai")}</b>
                                                </label>
                                            </section>
                                            <section class="col col-6">
                                                <label class="input">
                                                    <p:inputText  placeholder="#{utilsController.getLanguages('DienThoaiNha')}" value="#{sys_NguoiDungController.item.dienThoaiNha}" styleClass="rounded-custom-def"></p:inputText>

                                                    <b class="tooltip tooltip-bottom-right">#{utilsController.getLanguages("rs_msg_DienThoaiNha")}</b>
                                                </label>
                                            </section>
                                        </div>
                                        <div class="row terms">
                                            <label class="checkbox"><input type="checkbox" name="checkbox" id="term"/><i></i>I accept terms of the
                                                <br/><a href="/privacy.html" >Privacy Statement</a> <span>and</span> <a href="/Participation.html">Visitor Agreement</a></label>

                                        </div>
                                    </fieldset>
                                    <footer>
                                        <button class="btn-u rounded-custom-def" type="button" onclick="DangKy_Click();">#{utilsController.getLanguages("DangKy")}</button>
                                        <p:remoteCommand name="DangKy"  actionListener="#{sys_NguoiDungController.DangKy}" update=":sky-form" oncomplete="updateSelectboxValue();" ></p:remoteCommand>
                                        <p:remoteCommand name="cboQuocGiaID_Change" actionListener="#{sI_TinhController.cboQuocGiaID_Change}" update=":sky-form:pnTinh"></p:remoteCommand>


                                    </footer>
                                </h:form>
                                <!-- End Reg-Form -->
                            </div>
                        </div>
                    </div>
        </ui:define>
    </ui:composition> 
</html>